打開 public 資料夾，我們可以看見熟悉的 index.html，雖然裏面塞滿了花花綠綠的各種註解，但我們只要專注在找到我們的目標元件就好：

<div id="root"></div>

他執行了我們所看到的那片紫色畫面裡的物件（忘記的話請回上一篇看一下～～）。

接著我們到 src 資料夾裡找到 index.js 就可以看到他做了些什麼好事

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';  // 這邊載入了一個App的jS檔，別想逃過我的火眼金睛！！！
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

其實一隻隻看就可以知道 React 把許多 jS 都抽成一小塊一小塊的拼圖，通常這樣的行為稱之為“模組化”的寫法（沒記錯應該是吧）。

以網頁設計師的角度來看就是我們把好多要重複做的東西群組起來，然後同時載入，這樣我們只要改一個檔案，就可以變動許多頁面了，聽起來是不是很棒。

注意：jS檔案跟CSS檔案都要放在src裡面唷！

接著讓我們來修改 App.js 裡的東西，儲存後它就會即時反映在昨天我們所看到的網頁裡。

例如這麼寫：

import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>
          我是一個老頑皮啊～老頑皮～
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          其實我也有部落格，但我不要說！
        </a>
      </header>
    </div>
  );
}

export default App;

就會得到這樣的畫面喔！